<template>
  <div class="app-container">
    <div class="head">
      <div class="left">
        <div>
          <el-segmented
            style="margin-right: 12px"
            v-model="dataType"
            :options="dataOptions"
            @change="getData"
          />
          <el-segmented
            style="margin-right: 12px"
            v-model="timeType"
            :options="options"
            @change="getData"
          />
        </div>
        <el-form ref="ruleFormRef" :model="ruleForm" label-width="120px" class="demo-ruleForm">
          <el-form-item label="小区名称：" prop="role" v-if="dataType == 'COMMUNITY'">
            <el-select
              v-model="ruleForm.communityName"
              placeholder="请选择所属小区"
              style="width: 220px"
              filterable
              @change="getData"
            >
              <el-option
                v-for="ite in communityList"
                :key="ite.id"
                :label="ite.communityName"
                :value="ite.communityName"
              />
            </el-select>
          </el-form-item>
          <el-form-item label="站点名称：" prop="siteId" v-if="dataType == 'SITE'">
            <el-select
              v-model="ruleForm.siteName"
              placeholder="请选择站点名称"
              style="width: 220px"
              filterable
              @change="getData"
            >
              <el-option
                v-for="ite in siteList"
                :key="ite.id"
                :label="ite.siteName"
                :value="ite.siteName"
              />
            </el-select>
          </el-form-item>
        </el-form>
      </div>
      <div>
        <el-button type="primary" @click="exportExcelBtn">
          <el-icon style="margin-right: 6px"><Download /></el-icon>导出 Excel
        </el-button>
        <el-button type="primary" @click="flashData">
          <el-icon style="margin-right: 6px"><Refresh /></el-icon>数据更新
        </el-button>
      </div>
    </div>
    <div class="tab">
      <div class="z-tab">
        <el-table class="table" style="width: 100%" :data="data" border v-loading="loading">
          <template v-for="(item, index) in column" :key="index">
            <el-table-column
              v-if="!item?.if?.includes(timeType) && !item?.if?.includes(dataType)"
              :label="item.label"
              :prop="item.name"
              :width="item.width"
              align="center"
            >
              <template #default="scope">
                <div v-if="item.moneyType">
                  {{ numberFormat(scope.row[item.name]) }}
                </div>
              </template>
            </el-table-column>
          </template>
        </el-table>
      </div>
      <div class="foot">
        <el-pagination
          v-model:currentPage="pageInfo.pageNum"
          :page-size="pageInfo.pageSize"
          background
          layout="total, sizes, prev, pager, next, jumper"
          :page-sizes="[15, 30, 45, 60, 75, 90, 105]"
          :total="total"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </div>
    </div>
    <FlashData ref="flashDataRef" @getData="reset" />
  </div>
</template>
<script lang="ts" setup name="comprehensive">
  import { ref, onMounted } from 'vue'
  import FlashData from './components/flashDataDrawer.vue'
  import { exportExcel } from '@/utils/exprotExcel'
  import { numberFormat } from '@/utils/numberFormat.ts'
  import {
    postSiteDetailSummaryPageLike,
    postSiteDetailSummaryQueryLike,
  } from '@/api/controller/site-detail-controller/index'
  import { postCommunityMatch } from '@/api/controller/community-controller/index'
  import { postSiteMatch } from '@/api/controller/site-controller/index'
  const loading = ref(true)
  const ruleForm = ref({
    communityName: null,
    siteName: null,
  })
  const communityList = ref([])
  const siteList = ref([])
  const column = [
    { name: 'year', label: '年份', width: 120 },
    { name: 'period', label: '季度', width: 120, if: ['YEAR', 'MONTH'] },
    { name: 'period', label: '月份', width: 120, if: ['YEAR', 'QUARTER'] },
    { name: 'communityName', label: '小区名称', width: 150, if: ['ALL'] },
    { name: 'income', label: '收入(元)', width: 120, moneyType: true },
    { name: 'grossProfit', label: '毛利润(元)', width: 120, moneyType: true },
    { name: 'netProfit', label: '净利润(元)', width: 120, moneyType: true },
    { name: 'profitOut', label: '应分利润(元)', width: 120, moneyType: true },
    { name: 'electricity', label: '电量消耗(千瓦时)', width: 160, moneyType: true },
    { name: 'electricityFee', label: '电费(元)', width: 120, moneyType: true },
    {
      name: 'channelFee',
      label: '渠道费总和(元)',
      width: 120,
      moneyType: true,
      if: ['ALL'],
    },
    { name: 'useNumber', label: '使用次数', width: 120 },
    { name: 'averageUseTime', label: '平均使用时间(分钟)', width: 150, moneyType: true },
    { name: 'useTime', label: '使用总时间(分钟)', width: 150, moneyType: true },
    { name: 'unuseRate', label: '空置率(%)', width: 120, if: ['ALL'] },
  ]
  const timeType = ref('YEAR')
  const dataType = ref('COMMUNITY')
  const dataOptions = [
    { label: '站点', value: 'SITE' },
    { label: '小区', value: 'COMMUNITY' },
    { label: '全部', value: 'ALL' },
  ]
  const options = [
    { label: '年', value: 'YEAR' },
    { label: '季度', value: 'QUARTER' },
    { label: '月', value: 'MONTH' },
  ]
  const data = ref(null)
  const pageInfo = ref({
    pageNum: 1,
    pageSize: 10,
  })
  const total = ref(0)
  //重置
  const reset = async () => {
    pageInfo.value = {
      pageNum: 1,
      pageSize: 15,
    }
    getData()
  }
  //初始化
  onMounted(async () => {
    postCommunityMatch({}).then((res) => {
      communityList.value = res.data
    })
    postSiteMatch({}).then((res) => {
      siteList.value = res.data
    })
    pageInfo.value = {
      pageNum: 1,
      pageSize: 15,
    }
    getData()
  })
  const getData = async () => {
    try {
      loading.value = true
      data.value = []
      if (dataType.value === 'COMMUNITY') {
        ruleForm.value.siteName = null
      }
      if (dataType.value === 'SITE') {
        ruleForm.value.communityName = null
      }
      const result = await postSiteDetailSummaryPageLike({
        ...pageInfo.value,
        query: dataType.value,
        period: timeType.value,
        ...ruleForm.value,
      })
      data.value = result.data.list
      total.value = result.data.total
    } finally {
      loading.value = false
    }
  }
  const handleSizeChange = (val) => {
    pageInfo.value = {
      pageNum: 1,
      pageSize: val,
    }
    getData()
  }
  const handleCurrentChange = () => {
    getData()
  }
  const excelColumn = {
    ALL: {
      YEAR: [
        { name: 'year', label: '年份', width: 120 },
        { name: 'income', label: '收入(元)', width: 120, moneyType: true },
        { name: 'grossProfit', label: '毛利润(元)', width: 120, moneyType: true },
        { name: 'netProfit', label: '净利润(元)', width: 120, moneyType: true },
        { name: 'profitOut', label: '分出利润(元)', width: 120, moneyType: true },
        { name: 'electricity', label: '电量消耗(千瓦时)', width: 160, moneyType: true },
        { name: 'electricityFee', label: '电费(元)', width: 120, moneyType: true },
        { name: 'useNumber', label: '使用次数', width: 120 },
        { name: 'averageUseTime', label: '平均使用时间(分钟)', width: 150, moneyType: true },
        { name: 'useTime', label: '使用总时间(分钟)', width: 150, moneyType: true },
      ],
      MONTH: [
        { name: 'year', label: '年份', width: 120 },
        { name: 'period', label: '月份', width: 120 },
        { name: 'income', label: '收入(元)', width: 120, moneyType: true },
        { name: 'grossProfit', label: '毛利润(元)', width: 120, moneyType: true },
        { name: 'netProfit', label: '净利润(元)', width: 120, moneyType: true },
        { name: 'profitOut', label: '分出利润(元)', width: 120, moneyType: true },
        { name: 'electricity', label: '电量消耗(千瓦时)', width: 160, moneyType: true },
        { name: 'electricityFee', label: '电费(元)', width: 120, moneyType: true },
        { name: 'useNumber', label: '使用次数', width: 120 },
        { name: 'averageUseTime', label: '平均使用时间(分钟)', width: 150, moneyType: true },
        { name: 'useTime', label: '使用总时间(分钟)', width: 150, moneyType: true },
      ],
      QUARTER: [
        { name: 'year', label: '年份', width: 120 },
        { name: 'period', label: '季度', width: 120 },
        { name: 'income', label: '收入(元)', width: 120, moneyType: true },
        { name: 'grossProfit', label: '毛利润(元)', width: 120, moneyType: true },
        { name: 'netProfit', label: '净利润(元)', width: 120, moneyType: true },
        { name: 'profitOut', label: '分出利润(元)', width: 120, moneyType: true },
        { name: 'electricity', label: '电量消耗(千瓦时)', width: 160, moneyType: true },
        { name: 'electricityFee', label: '电费(元)', width: 120, moneyType: true },
        { name: 'useNumber', label: '使用次数', width: 120 },
        { name: 'averageUseTime', label: '平均使用时间(分钟)', width: 150, moneyType: true },
        { name: 'useTime', label: '使用总时间(分钟)', width: 150, moneyType: true },
      ],
    },
    COMMUNITY: {
      YEAR: [
        { name: 'year', label: '年份', width: 120 },
        { name: 'communityName', label: '小区名称', width: 150 },
        { name: 'income', label: '收入(元)', width: 120, moneyType: true },
        { name: 'grossProfit', label: '毛利润(元)', width: 120, moneyType: true },
        { name: 'netProfit', label: '净利润(元)', width: 120, moneyType: true },
        { name: 'profitOut', label: '分出利润(元)', width: 120, moneyType: true },
        { name: 'electricity', label: '电量消耗(千瓦时)', width: 160, moneyType: true },
        { name: 'electricityFee', label: '电费(元)', width: 120, moneyType: true },
        { name: 'channelFee', label: '渠道费总和(元)', width: 120, moneyType: true },
        { name: 'useNumber', label: '使用次数', width: 120 },
        { name: 'averageUseTime', label: '平均使用时间(分钟)', width: 150, moneyType: true },
        { name: 'useTime', label: '使用总时间(分钟)', width: 150, moneyType: true },
        { name: 'unuseRate', label: '空置率(%)', width: 120 },
      ],
      MONTH: [
        { name: 'year', label: '年份', width: 120 },
        { name: 'period', label: '月份', width: 120 },
        { name: 'communityName', label: '小区名称', width: 150 },
        { name: 'income', label: '收入(元)', width: 120, moneyType: true },
        { name: 'grossProfit', label: '毛利润(元)', width: 120, moneyType: true },
        { name: 'netProfit', label: '净利润(元)', width: 120, moneyType: true },
        { name: 'profitOut', label: '分出利润(元)', width: 120, moneyType: true },
        { name: 'electricity', label: '电量消耗(千瓦时)', width: 160, moneyType: true },
        { name: 'electricityFee', label: '电费(元)', width: 120, moneyType: true },
        { name: 'channelFee', label: '渠道费总和(元)', width: 120, moneyType: true },
        { name: 'useNumber', label: '使用次数', width: 120 },
        { name: 'averageUseTime', label: '平均使用时间(分钟)', width: 150, moneyType: true },
        { name: 'useTime', label: '使用总时间(分钟)', width: 150, moneyType: true },
        { name: 'unuseRate', label: '空置率(%)', width: 120 },
      ],
      QUARTER: [
        { name: 'year', label: '年份', width: 120 },
        { name: 'period', label: '季度', width: 120 },
        { name: 'communityName', label: '小区名称', width: 150 },
        { name: 'income', label: '收入(元)', width: 120, moneyType: true },
        { name: 'grossProfit', label: '毛利润(元)', width: 120, moneyType: true },
        { name: 'netProfit', label: '净利润(元)', width: 120, moneyType: true },
        { name: 'profitOut', label: '分出利润(元)', width: 120, moneyType: true },
        { name: 'electricity', label: '电量消耗(千瓦时)', width: 160, moneyType: true },
        { name: 'electricityFee', label: '电费(元)', width: 120, moneyType: true },
        { name: 'channelFee', label: '渠道费总和(元)', width: 120, moneyType: true },
        { name: 'useNumber', label: '使用次数', width: 120 },
        { name: 'averageUseTime', label: '平均使用时间(分钟)', width: 150, moneyType: true },
        { name: 'useTime', label: '使用总时间(分钟)', width: 150, moneyType: true },
        { name: 'unuseRate', label: '空置率(%)', width: 120 },
      ],
    },
  }
  const exportExcelBtn = async () => {
    let res = await postSiteDetailSummaryQueryLike(
      { query: dataType.value, period: timeType.value },
      { loading: true },
    )
    exportExcel({
      column: excelColumn[dataType.value][timeType.value],
      data: res.data,
      filename: '分成数据汇总统计',
      format: 'xlsx',
      autoWidth: true,
    })
  }

  const flashDataRef = ref()
  const flashData = () => {
    flashDataRef.value.show()
  }
</script>

<style lang="scss" scoped>
  .app-container {
    flex: 1;
    display: flex;
    width: 100%;
    padding: 16px;
    box-sizing: border-box;
    .head {
      background-color: white;
      padding: 18px 18px 0 18px;
      margin-bottom: 16px;
      border-radius: 4px;
      display: flex;
      justify-content: space-between;
      box-shadow: 0 0 12px rgb(0 0 0 / 5%);
      .left {
        display: flex;
      }
    }
    .tab {
      display: flex;
      flex-direction: column;
      background-color: white;
      padding: 20px;
      border-radius: 4px;
      box-shadow: 0 0 12px rgb(0 0 0 / 5%);
      flex: 1;
      .z-tab {
        position: relative;
        flex: 1;
        height: 100%;
        .table {
          position: absolute;
          height: 100%;
        }
      }
    }
    .foot {
      display: flex;
      justify-content: center;
      padding-top: 20px;
    }
  }
</style>
